<!-- 练习 exercise.html -->
{% extends 'paper/base.html' %}
{% block title %}练习{% endblock %}
{% block content %}
    <h3><span class="badge badge-info">练习题</span></h3>
    <div class="row">
        <div class="col-auto"><span class="badge badge-warning"> 时间：<span id="timer1">00:00:00</span> </span></div>
    </div>
    <div class="row" style="margin-top: 6px; margin-bottom: 10px">
        <div class="col-3">
            <select id="id_courses" class="form-control" name="course">
                {% for s in courses %}
                    <option value={{ s }}>{{ s }}</option>
                {% endfor %}
            </select>
        </div>
        <div class="col-6">
            <select id="id_subject" class="form-control" name="subject">
            </select>
        </div>
        <div class="col-3">
            <button class="btn btn-outline-primary" id="btn_find">搜索</button>
        </div>
    </div>
    <div id="id_questions">
        <!-- 题目 -->
    </div>
{% endblock %}
{% block script %}
    <script src="/static/easytimer/easytimer.js"></script>
    <script>
        $(document).ready(function () {
            // 定义计时器： 做题，看分析
            let timer_exercise = new easytimer.Timer();
            let timer_analyze = new easytimer.Timer();
            // console.log(timer_exercise);
            timer_exercise.start();
            timer_exercise.addEventListener('secondsUpdated', function (e) {
                // console.log(timer_exercise.getTimeValues().toString());
                $('#timer1').html(timer_exercise.getTimeValues().toString());
            });

            let subjects = {{ subjects|safe }};
            // 查看答案
            $('#id_mark').click(function (evt) {
                $('#btn-answer').click();
            });

            // 改变主题
            $('#btn_find').click(function (evt) {
                evt.preventDefault();
                $('#id_questions').html('');
                $.post(
                    '{% url "paper:exercise" %}',
                    {
                        'course': $(id_courses).val(),
                        'subject': $('#id_subject').val()
                    },
                    function (data) {
                        console.log(data);
                        $('#id_questions').append(data.html);
                    }
                );
            });
            let id_courses = $('#id_courses');
            // 初始化选项
            set_option();
            // 函数
            function set_option(val) {
                let course = id_courses.val();
                let subject = $('#id_subject');
                subject.html('');
                $.each(subjects, function (i, v) {
                    if (v.title === course) {
                        // console.log(v.subjects);
                        let html = '';
                        $.each(v.subjects, function (i, v) {
                            if (v === '')
                                console.log('v is empty');
                            html += `<option value="${v}">${v}</option>`;
                        });
                        subject.append(html);
                    }
                });
            }

            // 课程变化
            id_courses.change(function () {
                set_option();

            });

            // ready
        });
    </script>

{% endblock %}
